<template>
  <div class="content-bg">
    <section>
      <div class="content white-bg container">
        <hello-world @my-event="myEvent" :number="number">
          <p>在子组件里面插入一个内容</p>
          <!--用slot命名的方式来将内容插入到指定的位置-->
          <p slot="header">xxx header</p>
          <p slot="footer">xxx footer</p>
        </hello-world>
        <!--用is来绑定动态组件-->
        <!--v-for 既能进行数组的渲染 也能进行对象的渲染-->
        <ul>
          <li v-for="(item,index) in List" :class="{odd:index % 2}" :key="index">{{item.name}}-{{item.price}}-{{index}}</li>
        </ul>
        <el-button type="warning" @click="addItem">按钮</el-button>
        <span class="iconfont sd_star11"></span>
        <span class="iconfont person"></span>
        <!--对象-->
        <ul style="margin-top:20px;">
          <li v-for="(value,key) in obList" :key="key">{{key +'--'+ value}}</li>
        </ul>
        <input type="text" v-model="value">{{value}}
        <input type="checkbox" v-model="myBox" value="1">
        <input type="checkbox" v-model="myBox" value="2">
        {{myBox}}
        <el-checkbox  v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
        {{checkedCities}}
        <el-checkbox  v-model="checkAllSub" @change="handleCheckAllSubject">全选</el-checkbox>
        <el-checkbox-group v-model="checkedSub" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="sub in subject" :label="sub.id" :key="sub.id">{{sub.name}}</el-checkbox>
        </el-checkbox-group>
        <!--由上面控制下面内容的显示-->
        <ul>
          <li v-for="p in selectedSubject" :key="p">{{p.name}}</li>
        </ul>

        <!--过渡-->
        <button @click="show=!show">Toggle</button>
        <div class="ab">
          <transition name="fade">
            <p v-show="show">i am show</p>
          </transition>
        </div>
        <!--vuex 状态管理模式  管理各组件的共享状态-->
        <div style="margin-top: 20px;">
          {{totalPrice}}
          <Apple></Apple>
          <Banana></Banana>
        </div>

        <!-- 验证lodash -->
         <el-button id="button" type="success" @click="testLodash">成功按钮(lodash)</el-button>

      </div>
    </section>
  </div>
</template>

<script>
  import Vue from 'vue'
 
  import HelloWorld from '../HelloWorld.vue'
  import Apple from '../Apple.vue'
  import Banana from '../Banana.vue'
  import types from '../../store/types'
  export default {
    name: 'PageMain',
    data() {
      return {
        input: '',
        value:'',
//              checkAll:false,
        checkedCities:[],
        checkedSub:[],
        cities:['上海', '北京', '广州', '深圳'],
        myBox:[],
        List:[
          {name:'apple',price:34},
          {name:'banana',price:56},
        ],
        obList:{
          name:'apple',
          price:34,
          color:'red',
          weight:14
        },
        subject:[
          {id:1,name:'语文'},
          {id:2,name:'数学'},
          {id:3,name:'英语'}
        ],
        selectedSubject:[],
        number:'父组件传递给子组件的值',
        show:true,

      }
    },
    methods: {
      testLodash(){
        let vm = this
        let aa= !vm.$_.isEmpty(vm.number);
        let bb=vm.$$('#button').text('改变后');
        vm.$Cookies.set('user','xiaoxiao')
        console.log('111',aa,bb);
      },
      addItem(){
        let vm =this
//            vm.List.push(
//              {name:'pinaapple',price:100}
//            )
        /*给列表赋值，列表是不会改变*/
//            vm.List[1]={
//              name:'pinaapple',
//              price:100
//            }
//            我们有另外一种方法来给改变列表
        Vue.set(vm.List,1,{
          name:'pinaapple',
          price:100
        })
      },
      myEvent(parmfromA){
        console.log('myEvent'+parmfromA)
      },
//          /*全选方法*/
      handleCheckAllChange(){
        let vm =this
        vm.checkedCities=vm.checkAll ?  [] : vm.cities
      },
//          全选学科
      handleCheckAllSubject(){
        let vm =this
        vm.checkedSub=vm.checkAllSub ? [] :vm.subject.map(a=>a.id)
      },
      handleCheckedCitiesChange(){

      },

    },
    computed: {
      checkAll(){
        let vm =this
        return vm.checkedCities.length == vm.cities.length
      },
      checkAllSub(){
        let vm =this
        return vm.checkedSub.length == vm.subject.length
      },
      totalPrice(){
        let vm =this
//            return vm.$store.state.totalPrice //这是直接从state中获取
        return vm.$store.getters[types.GETTERS.getTotal] //这是从getters中获取
      }

    },
    created() {
      const vm = this
    },
    mounted () {
      let vm =this
      vm.$watch('checkedSub',function(){
        vm.selectedSubject=vm.subject.filter(sub=>vm.checkedSub.indexOf(sub.id)!=-1)
      },{deep:true})


    },
    components:{
      HelloWorld,
      Apple,
      Banana,
    }
  }
</script>

<style>
  /*触发列表的更新的几种方法*/
  /*push() pop() shift() unshift() splice() sort() reverse()*/
  /*不能触发列表更新的几种方法*/
  /*filter() contact() slice()*/
  /*给其中某一项赋值*/
  /*vm.item[indexOfItem] = newValue*/
  /*gai*/
  /*vm.items.length=newLength*/
</style>

